<template>
  <div class="bar">

  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {

    }
  },
  methods: {
    bar () {
      const bar = echarts.init(document.querySelector('.bar'))
      const option = {

        backgroundColor: '#020347',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {

        },
        xAxis: {
          type: 'category',
          data: ['管理员']
        },
        yAxis: {
          type: 'value',
          data: ['1', '2', '3', '4', '5', '6', '7'],
          axisLine: {
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            name: 'A',
            data: ['200'],
            barWidth: '5%',
            itemStyle: {
              barBorderRadius: 12
            }

          },
          {
            type: 'bar',
            name: 'B',
            data: ['600'],
            barWidth: '5%',
            itemStyle: {
              barBorderRadius: 12
            }
          },
          {
            type: 'bar',
            name: 'C',
            data: ['400'],
            barWidth: '5%',
            itemStyle: {
              barBorderRadius: 12
            }
          }

        ]
      }
      bar.setOption(option)
    }
  },
  mounted () {
    this.bar()
  }
}
</script>

<style>

.bar{
width: 690px;
height: 400px;
margin-left: 20px;
background-color: #fff;
}
</style>
